<template lang="">
  <div class="content">
    <div class="main">
      <el-tabs v-model="activeName">
        <el-tab-pane label="全部" name="first">
          <div class="search" style="border: 0px solid #000;height: auto;background-color: #fff;padding-top: 10px;">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="16">
                <div class="left">
                  <div class="top" style="border: 0px solid #000;margin-top: 0px;text-align: left;margin-bottom: 5px;">
                    <el-select v-model="industry" placeholder="请选择行业" clearable
                      @change="getDepartmentList();industryInput()">
                      <el-option v-for="dict in industryList" :key="dict.dictKey" :label="dict.dictValue"
                        :value="dict.dictValue">
                      </el-option>
                    </el-select>
                    <el-select v-model="province" placeholder="请选择省份" clearable @change="provinceInput()">
                      <el-option v-for="item in provinceList" :key="item.dictKey" :label="item.dictKey"
                        :value="item.dictKey">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="bottom" style="border: 0px solid #000;margin-left: 0px;margin-top: 20px;">
                    <div class="tit"
                      style="border: 0px solid #000;text-align: left;margin-top: 10px;padding-left: 25px;min-height:35px">
                      <span style="font-size: 16px;color: #999;">单位类型</span>
                      <div class="jd" style="border: 0px solid #000;margin-left: 90px;margin-top: -20px;">
                        <el-checkbox-group v-model="departmentListBox" @change="departmentInput()">
                          <el-checkbox v-for="item in departmentList" :key="item.dictKey" :label="item.dictValue">
                            {{item.dictValue}}
                          </el-checkbox>
                        </el-checkbox-group>
                      </div>
                    </div>
                    <div style="text-align: left;margin-left: 25px;">
                      <p>客户数量<span style="color:  #fe0100;font-size: 16px;">{{total}}</span>人</p>
                    </div>
                  </div>

                </div>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
                <div class="right">
                  <div class="cx" style="position: relative;left: -200px;">
                    <el-input suffix-icon="el-icon-search" v-model="username" placeholder="请输入客户名称"
                      @input="usernameInput()" style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;">
                    </el-input>
                    <el-select v-model="customType" placeholder="请选择客户类型" @input="customTypeInput()" clearable>
                      <el-option v-for="item in dictList" :key="item.dictId" :label="item.dictKey" :value="item.dictKey"
                        style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="cz" style="position: relative;left: 140px;top: -45px;">
                    <el-button @click="goto" type="danger" class="button">创建</el-button>
                    <el-button @click="deleteRow()" type="danger" class="button">删除</el-button>
                  </div>

                </div>
              </el-col>
            </el-row>
          </div>
          <div class="tabs">
            <el-table border ref="singleTable" :data="userList" highlight-current-row tooltip-effect="dark"
              style="width: 100%;cursor: pointer;" @row-click="rowClick" @row-dblclick="handleSelectionChange">
              <el-table-column type="index" width="55" label="序号" align="center">
              </el-table-column>
              <el-table-column prop="username" label="客户名称" width="230" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div style="color:#161616">
                    <el-tag type="danger" effect="dark" size="mini" style="margin-right: 5px;"><span
                        style="color: #fff;font-weight: 600;">{{scope.row.cooperationTotal}}合作</span></el-tag>{{
                    scope.row.username }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="customType" label="客户类型" width="90" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="customSource" label="客户来源" width="90" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="industry" label="行业" width="60" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="departmentType" label="单位类型" width="80" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="company" label="所属单位" width="180" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="grade" label="单位星级" width="180" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-rate disabled v-model="scope.row.grade">
                  </el-rate>
                </template>
              </el-table-column>
              <el-table-column prop="province" label="所属省份" width="80" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="city" label="所属县市" width="80" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="createUser" label="创建人" width="90" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="100" align="center" :formatter="dateFormat"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="followTime" label="跟进时间" width="100" align="center" :formatter="dateFormat"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="information" label="网址" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span style="color:#fe0100">
                    <a :href="scope.row.information" target="_blank">{{ scope.row.information }} </a>
                  </span>
                </template>
              </el-table-column>

            </el-table>
            <el-pagination style="margin:20px;text-align: right;" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :page-size="size" :current-page="current" :page-sizes="[10, 20, 30]"
              :total="total" layout="sizes,prev, pager, next">
            </el-pagination>
            <div style="margin-top: 20px">
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="今日新增" name="second">
          <custom-today></custom-today>
        </el-tab-pane>
        <el-tab-pane label="7日新增" name="third">
          <custom-seven></custom-seven>
        </el-tab-pane>
        <el-tab-pane label="本月新增" name="fourth">
          <custom-month></custom-month>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import CustomToday from '@/components/CustomToday.vue'
  import CustomSeven from '@/components/CustomSeven.vue'
  import CustomMonth from '@/components/CustomMonth.vue'
  import moment from 'moment';
  export default {
    name: 'staff',
    components: {
      CustomToday, CustomSeven, CustomMonth
    },
    data() {
      return {
        activeName: 'first',
        userList: [], //客户列表
        dictList: [],
        industryList: [],   //行业列表
        departmentList: [],  //单位类型
        departmentListBox: [],
        provinceList: [],   //省份列表
        // provinceListBox: [],
        province: '',
        industry: '水利',
        current: 1,
        size: 20,
        dictVar: '',
        total: 0,
        username: '',
        customType: ''
      }
    },
    mounted() {
      this.getUserList()
      this.getDictList()
      this.getIndustryList()
      this.getProvinceList()
    },
    methods: {
      //省份
      async getProvinceList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'province'
        }
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.provinceList = result.data.data
      },
      //行业
      async getIndustryList() {
        // 解构出参数
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'industry'
        }
        let result1 = await this.$API.dict.reqDictList(data)
        this.industryList = result1.data.data
        this.getDepartmentList()
      },
      //单位类型      
      async getDepartmentList() {
        // 解构出参数
        // this.userData.departmentType = ''
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: this.industry
        }
        let result = await this.$API.dict.reqDictList(data)
        this.departmentList = result.data.data
      },
      dateFormat: function (row, column) {
        // debugger
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY/MM/DD");
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleSizeChange(val) {
        // alert(`每页 ${val} 条`);
        this.size = val
        this.getUserList()
      },
      handleCurrentChange(val) {
        // alert(`当前页: ${val}`);
        this.current = val
        this.getUserList()
      },
      customTypeInput() {
        this.getUserList()
      },
      departmentInput() {
        this.getUserList()
      },
      provinceInput() {
        this.getUserList()
      },
      industryInput() {
        this.getUserList()
      },
      // 获取客户列表
      async getUserList() {
        // 解构出参数
        const {
          current,
          size,
          userType,
          username, customType, industry, province, departmentType
        } = this;
        var data = {
          current: current,
          size: size,
          userType: "23"
        }
        if (username != '') {
          data.username = username
        } if (this.departmentListBox.length > 0) {
          data.departmentType = this.departmentListBox.toString()
        } if (customType != '') {
          data.customType = customType
        } if (industry != '') {
          data.industry = industry
        } if (province != '') {
          data.province = province
        }
        let result = await this.$API.user.reqUserList(data)
        this.total = result.data.total;
        this.userList = result.data.data
      },
      // 获取客户类型列表
      async getDictList() {
        // 解构出参数    
        const { current, size, dictVar } = this;
        var data = {
          current: 1,
          size: 100,
          dictVar: 'CustomType'
        }
        let result = await this.$API.dict.reqDictList(data)
        // this.total = result.data.total;
        this.dictList = result.data.data

      },
      // 客户详情
      // detailRow(){
      //   if (this.currentRow == null) {
      //     this.$message("请选择一行进行操作");
      //   } else {
      //     this.$router.push({
      //     path: '/custem/detail',
      //     name: 'custemDetail',
      //     query: {
      //       userId: this.currentRow.userId,
      //     }
      //   });
      //   }
      // },
      // 删除客户
      rowClick(row) {
        this.currentRow = row
      },
      deleteRow() {
        if (this.currentRow == null) {
          this.$message("请选择一行进行删除操作");
        } else {
          this.$confirm("确认删除客户吗？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            var data = {
              userId: this.currentRow.userId
            }
            this.$API.user.deleteStaffy(data).then(res => {
              if (res.data.code == 200) {
                this.$message.success("删除成功！");
                this.getUserList()
              } else {
                this.$message.error("删除失败！");
              }
            })
          })
        }
      },
      usernameInput() {
        this.getUserList()
      },
      goto() {
        this.$router.push({
          path: '/InsertCustem'
        });
      },
      handleSelectionChange(val) {
        console.log(val)
        this.currentRow = val;
        this.$router.push({
          path: '/custem/detail',
          name: 'custemDetail',
          query: {
            userId: this.currentRow.userId,
          }
        });
      }
    }
  }

</script>
<style scoped>
  @import "../../../../style/style.css";

  .main {
    border: 0px solid #000;
    border-radius: 10px;
    overflow: hidden;
  }

  .main>>>.el-tabs__header {
    background-color: #fff;
    padding-left: 20px;
    height: 50px;
  }

  .main>>>.el-tabs__nav {
    height: 45px;
    padding-top: 5px;
  }

  .main>>>.el-checkbox-button__inner {
    border: none;
    background-color: transparent;
  }

  .main>>>.el-checkbox-button.is-checked .el-checkbox-button__inner {
    color: #fff;
    background-color: #409EFF;
    border-color: #409EFF;
    box-shadow: -1px 0 0 0 #8cc5ff;
  }

  .search .left {
    padding-left: 20px;
    border: 0px solid #000;
    width: 900px;
  }

  .main .right {
    border: 0px solid #000;
    padding-top: 10px;
  }

  .sl {
    /* box-shadow: 1px 1px 6px 3px #c4daff; */
    /* border: 1px solid #000; */
    border-radius: 10px;
    height: 100px;
    position: relative;
    left: 260px;
    top: -30px;
    width: 200px;
    line-height: 45px;
    background-color: #fe00000b;
  }

  .main>>>.el-select,
  .el-input {
    width: 200px;
    margin-left: 20px;
    border-radius: 50px;
    overflow: hidden;
    height: 40px;
    border: 0px solid #000;
  }

  .main>>>.el-input__icon {
    color: #000;
    font-weight: 600;
  }

  .main>>>.el-select .el-input .el-select__caret {
    color: #000;
  }

  .main .right {
    padding-right: 40px;
  }

  .main>>>.el-input__inner {
    background-color: #f5f5f7 !important;
  }
</style>